import React from 'react';
import NavHome from '../NavHome/NavHome';
import { ListView,Toast,PullToRefresh } from 'antd-mobile';
import { newsList } from '../../api/Cms';
import Notice from '../Notice/Notice'
import './List.scss'
 export default class List extends React.Component {
    constructor(props){
        super(props)
        // 创建ListViewDataSource对象
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2 // rowHasChanged(prevRowData, nextRowData); 用其进行数据变更的比较
        })
        this.state = {
            dataSource,
            datas: [],
            page: 1,
            pageSize:10,
            hasMore: true,
            refreshing: true,
            isLoading: true,
            dataArr: [],
          }
    }
    componentDidMount() {
        this.getData(true)
       
    }
    getData(ref = false) {
        //获取数据
        var para = {}
        para.pageSize = this.state.pageSize
        para.page = this.state.page
        newsList(para.page,para.pageSize).then((res)=>{
            const dataList = res.data
            if (!dataList) { // 判断是否已经没有数据了
                this.setState({
                refreshing: false,
                isLoading: false,
                hasMore: false
                })
        
                Toast.info('没有数据了~', 1)
                return false
            }
            if (ref) {
                //这里表示刷新使用
                // 下拉刷新的情况，重新添加数据即可(这里等于只直接用了第一页的数据)
                this.setState({
                page: this.state.page,
                dataSource: this.state.dataSource.cloneWithRows(dataList), // 数据源中的数据本身是不可修改的,要更新datasource中的数据，请（每次都重新）调用cloneWithRows方法
                hasMore: true, // 下拉刷新后，重新允许开下拉加载
                refreshing: false, // 是否在刷新数据
                isLoading: false, // 是否在加载中
                dataArr: dataList // 保存数据进state，在下拉加载时需要使用已有数据
                })
            } else {
                // 这里表示上拉加载更多
                // 合并state中已有的数据和新增的数据
                var dataArr = this.state.dataArr.concat(dataList) //关键代码
                this.setState({
                page: this.state.page,
                dataSource: this.state.dataSource.cloneWithRows(dataArr), // 数据源中的数据本身是不可修改的,要更新datasource中的数据，请（每次都重新）调用cloneWithRows方法
                refreshing: false,
                isLoading: false,
                dataArr: dataArr // 保存新数据进state
                })
            }
        })
      }
      
      // 下拉刷新
    onRefresh = () => {
        this.setState({
        refreshing: true,
        isLoading: true,
        page: 1 // 刷新嘛，一般加载第一页，或者按你自己的逻辑（比如每次刷新，换一个随机页码）
        }, ()=>{
        this.getData(true)
        })
    }

    // 滑动到底部时加载更多
    onEndReached = (event) => {
        // 加载中或没有数据了都不再加载
        if (this.state.isLoading || !this.state.hasMore) {
        return
        }
        this.setState({
        isLoading: true,
        page: this.state.page + 1, // 加载下一页
        }, ()=> {
        this.getData(false)
        })

    }

    render(){
        const separator = (sectionID, rowID) => (
            <div
              key={`${sectionID}-${rowID}`}
              style={{
                backgroundColor: 'rgb(250, 250, 250)',
                height: 8,
               
              }}
            />
          );
        const row = (rowData, sectionID, rowID) => {
            // 这里rowData,就是上面方法cloneWithRows的数组遍历的单条数据了，直接用就行
            return (
             <div key={rowID} style={{ padding: '0 15px' }}>
                <div
                  style={{
                    lineHeight: '50px',
                    color: '#888',
                    fontSize: 18,
                    borderBottom: '1px solid #F6F6F6',
                  }}
                >{rowData.title}</div>
                <div style={{  display: 'flex', padding: '15px 0' }}>
                  <img style={{ height: '64px', marginRight: '15px' }} src={rowData.pic} alt="" />
                  <div style={{ lineHeight: 1 }}>
                    <div style={{ marginBottom: '8px',lineHeight:'20px',fontSize:'14px',fontWeight:'400' }}>{rowData.descript}</div>
                   
                  </div>
                </div>
              </div>
            )
          }
        return(
            <div>
               <div className="content-bg">
                <div className="content-box">
                <ListView
                    renderSeparator={separator}
                    ref={el => this.lv = el}
                    dataSource={this.state.dataSource}
                    renderFooter={() => (<div className="footer">{this.state.isLoading ? '加载中...' : '暂无更多数据'}</div>)}
                    renderHeader={()=>(  <Notice/>  )}
                    renderRow={row}
                    useBodyScroll
                    pullToRefresh={<PullToRefresh
                    refreshing={this.state.refreshing}
                    onRefresh={this.onRefresh}
                    />}
                    onEndReachedThreshold={10}
                    onEndReached={this.onEndReached}
                    pageSize={10}
                />
                </div>
             </div>
             <NavHome/>
          </div>
        )
    }
  }